<template>
  <div class="text_number_outer" :class="ClassObj">{{ parseToPercent(row[this.field]) }}</div>
</template>
<script>
export default {
  name: 'tableRowTextColorRatio',
  props: {
    row: {
      type: Object,
      default: () => {},
    },
    // column: {
    //   type: Object,
    //   default: () => {},
    // },
    field: {
      type: String,
      default: '',
    },
    suffix: {
      type: String,
      default: '%',
    },
    bigNumber: {
      type: [String, Number],
      default: 100,
    },
    // align: {
    //   type: String,
    //   default: 'right',
    // },
  },
  data() {
    return {}
  },
  computed: {
    ClassObj() {
      let val = this.row[this.field]
      if (val === null || val === undefined) {
        return ''
      } else {
        return val > 0 ? 'text_word_red' : val < 0 ? 'text_word_green' : ''
      }
    },
  },
  methods: {
    parseToPercent(val) {
      if (val === null || val === undefined) {
        return '--'
      } else {
        return `${(val * this.bigNumber * 1.0).toFixed(2)}${this.suffix}`
      }
    },
  },
}
</script>
<style lang="less" scoped>
.text_number_outer {
  text-align: right;
}
.text_word_red {
  color: #f00;
}
.text_word_green {
  color: #0c0;
}
</style>
